<template>
  <div class="loginContainer">
    <div class="loginTitle">
      <div>
        <!-- <img src="@/assets/images/login/loginTitle.png" alt=""> -->
        <!-- <p>天基网络控制平台</p> -->
      </div>
    </div>
    <!-- 表单 -->
    <div class="loginContent">
      <div class="loginLeft">

      </div>

      <div class="loginForm">
        <div class="formTitle flex justify-center items-center">
          <span>XXX办公系统</span>
        </div>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" label-position="top">
          <el-form-item prop="account" label="账号">
            <span slot="label">
              <img src="@/assets/images/login/icon1.png" alt="" class="loginIcon">
              <span>账号</span>
            </span>
            <el-input v-model="loginForm.account" type="text" auto-complete="off" placeholder="请输入账号">
            </el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <span slot="label">
              <img src="@/assets/images/login/icon2.png" alt="" class="loginIcon">
              <span>密码</span>
            </span>
            <el-input @keyup.enter.native="handleLogin" v-model="loginForm.password" show-password type="password"
              auto-complete="off" placeholder="请输入密码">
            </el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <span slot="label">
              <img src="@/assets/images/login/icon3.png" alt="" class="loginIcon">
              <span>验证码</span>
            </span>
            <el-input v-model="loginForm.code" type="text" auto-complete="off" style="width: 63%"
              placeholder="请输入验证码"></el-input>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode" class="login-code-img" />
            </div>
          </el-form-item>
          <div class="pwdList">
            <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
          </div>
          <el-button @click.native.prevent="handleLogin">
            <div class="btn">
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </div>
          </el-button>
        </el-form>
      </div>
    </div>
    <div class="loginFooter">
      <div>Copyright © 2024XXX有限公司</div>
    </div>
    <xgmmDialog v-if="isShowXgmm" :isShowXgmm="isShowXgmm" @drawerClose="drawerClose"></xgmmDialog>
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import { encrypt } from "@/utils/jsencrypt";
import scaleMixin from '@/utils/scaleMixin.js';
import xgmmDialog from './components/xgmmDialog.vue'
export default {
  mixins: [scaleMixin],
  components: {
    xgmmDialog
  },
  data() {
    return {
      codeUrl: "",
      isShowXgmm: false,

      loginForm: {
        account: '',
        password: '',
        rememberMe: false,
      },
      loginRules: {
        account: [
          { required: true, message: '账号不能为空', trigger: "blur" },
          { pattern: /^[a-zA-Z0-9]+$/, message: '请输入正确格式的账号', trigger: "blur" }],
        password: [
          { required: true, message: '密码不能为空', trigger: "blur" },
          { pattern: /^[a-zA-Z0-9!@#$%^&*_]+$/, message: '请输入正确格式的密码', trigger: "blur" }
        ],
      },
      loading: false,
    }
  },
  created() {
    this.getCode()
    if (localStorage.getItem('sysLoginForm')) {
      this.loginForm = JSON.parse(localStorage.getItem('sysLoginForm'))
    } else {
      this.loginForm = this.$options.data.call(this).loginForm
    }
  },
  mounted() {

  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = "data:image/gif;base64," + res.data.img;
        this.loginForm.uuid = res.data.uuid;
      });
    },
    handleLogin() {
      this.loading = true;
      let param = {
        ...this.loginForm,
        code: '',
      }
      this.loginForm.password = encrypt(this.loginForm.password)
      localStorage.setItem('loginType', 'Sys')
      this.$store.dispatch("LoginByAccount", this.loginForm).then((res) => {
        if (res && res.code == 200 && res.data) {
          if (res.data.ifNeedChangePwd == 1) {
            this.isShowXgmm = true
            return
          } else {
            if (this.loginForm.rememberMe) {
              localStorage.setItem('sysLoginForm', JSON.stringify(param))
            } else {
              localStorage.getItem('sysLoginForm') && localStorage.removeItem('sysLoginForm')
            }
            this.$router.push({ path: '/index' })
          }
        } else {
          this.getCode();
        }
      }).catch(() => {
        this.loading = false;
        this.loginForm = this.$options.data.call(this).loginForm;
        this.getCode();
      });
    },
    drawerClose() {
      this.isShowXgmm = false;
      this.resData = null;
    },
  }
}
</script>
<style lang="scss" scoped>
.loginContainer {
  width: 100vw;
  height: 100vh;
  background-image: url("~@/assets/images/login/loginBg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;

  .loginTitle {
    width: 100%;
    // height: 126px;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    div {
      display: flex;
      align-items: center;

      img {
        width: 180px;
        height: 40px;
        margin-top: 40px;
        margin-left: 40px;
      }

      p {
        transform: scale(1, 0.994522) skew(-5.967369deg, 0deg);
        // box-shadow: 0px 0px 4px rgba(35, 123, 255, 1);
        text-align: center;
        background: linear-gradient(180deg, rgba(234, 250, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent;
        font-family: YouSheBiaoTiHei;
        font-size: 37px;
        letter-spacing: 0.5em;
      }
    }
  }

  .loginContent {
    flex: 1;
    display: flex;
    align-items: center;

    .loginLeft {
      position: absolute;
      top: 10%;
      left: 5%;
      height: 100%;
      width: 960px;

      .login-bg-logo {
        width: 30%;
        margin-bottom: 200px;
        box-sizing: border-box;
        img{
          width: 100%;
        }
      }

      .login-bg-text {
        width: 100%;
        img {
          width: 100%;
        }
      }

    }

    .loginForm {
      position: absolute;
      right: 8%;
      top: 12%;
      box-sizing: border-box;
      padding: 56px 40px;
      border-radius: 4px;
      background: #ffffff;
      box-shadow: 0px 0px 15px #184fa026;
      z-index: 100;

      @media (max-width: 1366PX) {
        top: 15%;
        right: 6%;
      }

      // padding: 73px 73px 102px;
      .formTitle {
        text-align: center;
        color: #285af1;
        font-weight: bold;
        font-size: 35px;
        // letter-spacing: 0.1em;
        width: 100%;
        .formTitle-img{
          margin-right: 10px;
          width: 50px;
          img {
            width: 100%;
          }
        }

      }

      .login-form {
        margin-top: 40px;
        width: 520px;

        @media (max-width: 1366PX) {
          width: 400px;
          margin-top: 20px;
        }

        .pwdList {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 20px;

          @media (max-width: 1366PX) {
            padding-bottom: 10px;
          }

          >span {
            cursor: pointer;
            color: #1e6fff;
            font-family: "Alibaba PuHuiTi 3.0";
            font-weight: 400;
            font-size: 16px;
          }
        }

        .el-form-item {
          margin-bottom: 24px;

          @media (max-width: 1366PX) {
            margin-bottom: 10px;
          }
        }

        .login-code {
          width: 33%;
          height: 56px;
          float: right;

          img {
            cursor: pointer;
            vertical-align: middle;
          }
        }

        .loginIcon {
          width: 24px;
          height: 24px;
          margin-right: 5px;
        }

        /deep/.el-form-item__label {
          display: flex;
          align-items: center;
          padding-bottom: 6px;

          @media (max-width: 1366PX) {
            padding-bottom: 1px;
          }

          >span {
            display: flex;
            align-items: center;
          }
        }

        /deep/.el-input {
          border: none;
          box-sizing: border-box;
          background: #F7F8FA;
          border-radius: 4px;

          // box-shadow: 0px 0px 4px rgba(41, 123, 199, 0.25);
          &:hover {
            border: 1px solid #1E6FFFed;
          }

          .el-input__inner {
            border: none !important;
            // background-color: transparent;
            // padding-left: 87px;
            color: #8694A6 !important;
            font-family: "Alibaba PuHuiTi 3.0";
            height: 56px;
            line-height: 56px;
            font-size: 16px;
          }

          .el-input__prefix {
            display: flex;
            align-items: center;
            left: 15px;

            &::after {
              content: '';
              display: inline-block;
              width: 1px;
              height: 25px;
              background: rgba(49, 125, 186, 1);
              margin-left: 16px;
            }
          }
        }

        .el-button {
          margin: 20px auto 0px;
          background-color: transparent;
          // transform: translateX(50%);
          border: none;
          padding: 0px;
          width: 100%;

          .btn {
            // padding: 15px 224px;
            border-radius: 8px;
            background: #1e6fff;
            // width: 520px;
            height: 56px;
            text-align: center;
            color: #FFFFFF;
            font-family: "Alibaba PuHuiTi 3.0";
            font-size: 18px;
            line-height: 56px;
            cursor: pointer;
          }
        }

      }
    }
  }

  .loginFooter {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #ACC0E1;

    .jszc {
      margin-left: 80px;
    }
  }
}
</style>
